import { defineComponent, type PropType, ref } from "vue";
import styles from "./HelloWorld.module.scss";
interface MyComponentProps {
  msg: string;
}
export default defineComponent({
  name: "HelloWord",
  props: {
    msg: {
      type: String as PropType<string>,
      required: true,
    },
  },
  setup(props: MyComponentProps) {
    // type propsType={
    //   msg:string
    // }
    // const prop:propsType = { ...props };
    console.log("props", props);
    const count = ref(0);
    console.log("count", count.value);
    const addCount = () => {
      count.value++;
      console.log("count", count.value);
    };

    return () => (
      <>
        <div class={styles.hello}>
          <h1>{props.msg}</h1>
          <div class={styles.card}>
            <button
              type="button"
              onClick={() => {
                addCount();
              }}
            >
              count is {count.value}
            </button>
            <p>
              Edit
              <code>components/HelloWorld.vue</code> to test HMR
            </p>
          </div>
          <p>
            Check out
            <a
              href="https://vuejs.org/guide/quick-start.html#local"
              target="_blank"
            >
              create-vue
            </a>
            , the official Vue + Vite starter
          </p>
          <p>
            Install
            <a href="https://github.com/vuejs/language-tools" target="_blank">
              Volar
            </a>
            in your IDE for a better DX
          </p>
          <p class={styles["read-the-docs"]}>
            Click on the Vite and Vue logos to learn more
          </p>
        </div>
      </>
    );
  },
});
